// 注册页面
import React, { useState } from 'react'
import { useNavigate } from 'react-router-dom'
import NavBarCom1 from '@/components/NarBarCom1'
import { Input, Form, Button, Cell, Dialog } from 'react-vant'
import { docheckphone, doSend } from '@/api/design'
import { useSelector, useDispatch } from 'react-redux'
type Props = {}

export default function Design({ }: Props) {
    const state = useSelector((state) => state)
    const dispatch = useDispatch()
    const navigate = useNavigate()
    const [disButt, setDisButt] = useState(true)
    const [form] = Form.useForm()
    const reg = /^1[3-9]\d{9}/;  //手机号正则验证
    // 根据手机号输入校验规则值，控制是否能够点击下一步按钮
    const changeFn = (val: any) => {
        // console.log('输入框的值', val);
        if (reg.test(val)) {
            setDisButt(false)
        } else { setDisButt(true) }
    }
    // 点击按钮：下一步
    const onFinish = (values: any) => {
        console.log('values', values)  // {tel:13413413430}  已经是一个对象了，包含tel
        // 将手机号存储到localStorage中,
        localStorage.setItem('tel', values.tel)

        // 怎么老报错呢？？？？ 传参错误
        // docheckphone({tel:values}).then((res) => {
        // 正确的传参
        docheckphone(values).then((res) => {
            console.log('手机号是否被注册', res);
            if (res.data.code == '200') {
                console.log(1111);
                // 没有被注册，可以继续,提示框,
                Dialog.confirm({
                    title: '标题',
                    message: `将向手机号${values.tel}发送验证码`,
                })
                    .then(() => {
                        console.log('确认');
                        // 跳转到发送短信验证码页面
                        // onConfirm:()=>{}
                        navigate('/design/step2')
                        doSend({ tel: values.tel }).then((res) => {
                            console.log('发送短信验证码1', res);
                        })
                    })
                    .catch(() => {
                        // console.log('取消')
                        // 关闭提示框
                        // navigate(-1)
                    })
            } else if (res.data.code == '10005') {
                // 已经被注册，
                Dialog.confirm({
                    title: '提示',
                    message: `手机号${values.tel}已经注册过，是否去登录`,
                })
                    .then(() => {//跳登录页
                        navigate('/login')
                    })
                    .catch(() => {
                        // navigate(-1)
                    })
            }
        })
    }
    return (
        <div>注册页面
            {/* 头部 */}
            <NavBarCom1>京东注册</NavBarCom1>
            {/* 手机号 */}
            <Form
                form={form}
                onFinish={onFinish}
                footer={
                    <div style={{ margin: '16px 16px 0' }}>
                        <Button round nativeType='submit' type='danger' block
                            disabled={disButt ? true : false}
                        >
                            下一步
                        </Button>
                    </div>
                }
            >
                <Form.Item
                    rules={[{ required: true, message: '请填写手机号' }]}
                    name='tel'
                    label='手机号'
                >
                    <Input placeholder='请输入手机号' onChange={changeFn} />
                </Form.Item>
            </Form>

        </div>
    )
}